import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useAppStore = defineStore('app', () => {
  // state
  const collapsed = ref(false)
  const selectedMenuKey = ref('home')

  // getters
  const isCollapsed = computed(() => collapsed.value)
  const currentMenuKey = computed(() => selectedMenuKey.value)

  // actions
  const setCollapsed = (value) => {
    collapsed.value = value
  }

  const toggleCollapsed = () => {
    collapsed.value = !collapsed.value
  }

  const setSelectedMenuKey = (key) => {
    selectedMenuKey.value = key
  }

  return {
    // state
    collapsed,
    selectedMenuKey,
    
    // getters
    isCollapsed,
    currentMenuKey,
    
    // actions
    setCollapsed,
    toggleCollapsed,
    setSelectedMenuKey
  }
})